import {Image, Text, View} from '@tarojs/components'
import styles from "./index.module.sass"
import marketImage from "../../assets/icons/服务超市.png"
import searchProductImage from "../../assets/icons/product.png"
import employeeImage from "../../assets/icons/user.png"
import operateRecordIcon from "../../assets/icons/log.png"
import {Cell, CellGroup, Grid, GridItem, Space} from "@nutui/nutui-react-taro";
import employeeStore from "../../store/EmployeeStore";
import {observer} from "mobx-react";
import Taro, {useDidShow} from "@tarojs/taro";
import {setTabBarState} from "../../custom-tab-bar/TabBarUtils";
import {useEffect, useState} from "react";
import {LatestUncommitedMarketOrder, queryLatestUncommitedMarketOrder} from "../../apis/MarketOrderApi";
import {ArrowRight} from "@nutui/icons-react-taro";
import {DATE_WITH_HOUR_MINUTE_FORMATER} from "../../utils/Date";
import authorizationStore from "../../store/AuthorizationStore";
import Scaffold from "../../components/Scaffold";
import shoppingCartImage from "../../assets/icons/采购.png";

function Index() {
    let gridItems = [
        {
            icon: searchProductImage,
            title: "商品",
            path: "/pages/goods",
            show: employeeStore.hasAuthority("货品_查询"),
        },
        {
            icon: employeeImage,
            title: "人员",
            path: "/pages/employees",
            show: employeeStore.hasAuthority("人员_查询"),
        },
        {
            icon: marketImage,
            title: "卖场",
            path: "/pages/market",
            show: employeeStore.hasAuthority("卖场_查询"),
        },
        {
            icon: shoppingCartImage,
            title: "采购",
            path: "/pages/procurement",
            show: employeeStore.hasAuthority("采购_查询"),
        },
        {
            icon: shoppingCartImage,
            title: "采购退货",
            path: "/pages/procurementReturn",
            show: employeeStore.hasAuthority("采购_查询"),
        },
        // {
        //     icon: checkInventoryImage,
        //     title: "盘点",
        //     path: "/pages/checkInventories",
        //     show: employeeStore.hasAuthority("库存_盘点_查询"),
        // },
        {
            icon: operateRecordIcon,
            title: "操作记录",
            path: "/pages/employeeOperateRecords",
            show: employeeStore.hasAuthority("人员_操作记录_查询"),
        },
        {
            icon: operateRecordIcon,
            title: "草稿单",
            path: "/pages/scratchDocument",
            show: true,
        },

    ]

    useDidShow(() => {
        setTabBarState(0)
    })

    const [latestUncommitedMarketOrders, setLatestUncommitedMarketOrders] = useState<LatestUncommitedMarketOrder[]>([])

    useEffect(() => {
        if (authorizationStore.hasLogIn) {
            queryLatestUncommitedMarketOrder().then(response => {
                setLatestUncommitedMarketOrders(response.data)
            })
        }
    }, [authorizationStore.hasLogIn]);

    return (
        <>
            <Scaffold title={"首页"} hasCustomBottomBar style={{overflowY:"auto"}}>
                <View>
                    <Grid>
                        {gridItems.filter(it => it.show).map(item => {
                            return <GridItem text={item.title} onClick={/*item.onClick ? item.onClick :*/ () => {
                                Taro.navigateTo({url: item.path})
                            }}>
                                <Image src={item.icon} className={styles.gridIcon}/>
                            </GridItem>
                        })}
                    </Grid>
                </View>

                {!!latestUncommitedMarketOrders.length && <CellGroup title={"继续编辑订单"}>
                    {latestUncommitedMarketOrders.map(order => {
                        return <Cell title={order.market.name + order.number} key={order.id}
                                     onClick={() => {
                                         Taro.navigateTo({
                                             url: `/pages/marketOrderDetail?id=${order.id}`
                                         })
                                     }}
                                     description={`${order.createdBy.name}创建于${order.createdDateTime.format(DATE_WITH_HOUR_MINUTE_FORMATER)}`}
                                     extra={<Space>
                                         <Text>{order.goodsAmount}个单品</Text>
                                         <ArrowRight/>
                                     </Space>}>
                        </Cell>
                    })}
                </CellGroup>}
            </Scaffold>
        </>
    )
}

export default observer(Index)
